<template>
  <div>
    <div class="cover1">
      <Cart :data="data.book_cover" />
      <BookCover :data="data.book_cover" />
    </div>
    <Chapters :data="data.book_cover" :chapters="data.chapters" :newChapters="data.newChapters" />
  </div>
</template>

<script>
import Cart from "../../components/common/card";
import BookCover from "../../components/home/BookCover";
import Chapters from "../../components/common/chapters";
import { useRoute } from "vue-router";
import { onMounted, reactive } from "vue";
import { getBook, getChapters } from "../../api/data";
export default {
  components: {
    Cart,
    BookCover,
    Chapters,
  },
  setup() {
    const data = reactive({
      book_cover: null,
      chapters: [],
      newChapters: [],
    });
    const route = useRoute();

    onMounted(async () => {
      let _id = route.params.id;
      let data1 = await getBook({ id: _id });
      // console.log(data1);
      if (data1.code == 200) {
        data.book_cover = data1.data;
        // console.log(data.book_cover)
        let data2 = await getChapters({
          _id: data1.data._id,
        });
        // console.log(data2);
        if (data2.code == 200) {
          data.chapters = data2.data || [];
          let length = data2.data.length;

          for (let i = length; i > length - 12; i--) {
            data.newChapters.push(data2.data[i - 1]);
          }
        } else {
          alert(data1.mag);
        }
      } else {
        alert(data1.mag);
      }
    });

    // data.book_cover = JSON.parse(route.query.data) || null;
    return {
      data,
    };
  },
};
</script>

<style>
.cover1 {
  border: 2px solid #88c6e5;
}
</style>